
import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Accordion,Tools } from 'weaver-mobile';
import { Icon, Result } from 'weaver-mobile';
// import { renderNoData } from '../../public';

const getLabel = Tools.getLabel;
@withRouter
@inject('wfCommunicateStore')
@observer
export default class RelatedResources extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      resourceActiveKeys:['0','1','2','3','4','5'],
    }
  }

  componentWillMount() {
    // console.log('componentwillmount')
    const { wfCommunicateStore } = this.props;
    const { getResource } = wfCommunicateStore;
    getResource();
    
  }
 
  componentWillUnmount() {
    // console.log("component will unmount")
  }
  resourceListChange = (key) =>{
    this.setState({resourceActiveKeys:key});
  }

  openLink = (e,href) => {
    e.preventDefault();
    window.openLink(href);
  }

  render() {
    const { wfCommunicateStore, prefixCls } = this.props;
    let { communicationId, resourceMap } = wfCommunicateStore;
    let acclength = resourceMap  && toJS(resourceMap.accList).length;
    let cuslength = resourceMap  && toJS(resourceMap.cusList).length;
    let doclength = resourceMap  && toJS(resourceMap.docList).length;
    let prjlength =  resourceMap && toJS(resourceMap.mutilprjList).length;
    let tasklength = resourceMap && toJS(resourceMap.taskList).length;
    let wflength = resourceMap && toJS(resourceMap.wfList).length;

    let rule = resourceMap && acclength === 0 && cuslength === 0 && doclength === 0 && prjlength === 0 && tasklength === 0 && wflength === 0;
    const renderNoData = (
      <div className={'wf-communication-noData'} >
        <Result 
          img={<Icon type="no-data"/>}
          message={getLabel(83553, '暂无数据')} />
      </div>
    )
    const relatedResourcesList = [
      {
        id: 0,
        name: getLabel(857, '相关文档'),
        list: resourceMap.docList,
        type:"doc",
        url:`/spa/document/static4mobile/index.html#/doc/`
      },
      {
        id: 1,
        name: getLabel(22105, '相关流程'),
        list: resourceMap.wfList,
        type:"wf",
        url:`/spa/workflow/static4mobileform/index.html#/req?requestid=`
      },
      {
        id: 2,
        name: getLabel(783, '相关客户'),
        list: resourceMap.cusList,
        type:"cus",
        url:`/spa/crm/static4mobile/#/customerCard/`
      },
      {
        id: 3,
        name: getLabel(782, '相关项目'),
        list: resourceMap.mutilprjList,
        type:"pro",
        url:`/spa/prj/static4mobile/index.html#/ProjectDetails/0/`
      },
      {
        id: 4,
        name: getLabel(33414, '相关任务'),
        list: resourceMap.taskList,
        type:"task",
        url:`/spa/prj/static4mobile/index.html#/TaskDetails/0/`
      },
      {
        id: 5,
        name: getLabel(22194, '相关附件'),
        list: resourceMap.accList,
        type:"acc",
        url:`/spa/document/static4mobile/index.html#/attach/`
      },
    ];
    return (
      <div className={`${prefixCls}-resourceList`} >
        { rule ? renderNoData : 
          <Accordion className={`${prefixCls}-resourceList-accordion`} activeKey={this.state.resourceActiveKeys} onChange={this.resourceListChange}>
            {
              relatedResourcesList.map((line) => {
                return (
                  line.list.length > 0 && 
                  <Accordion.Panel header={line.name} key={line.id}>
                    {
                      line.list.map((item, index) => {
                        return (
                          <div className={`${prefixCls}-resourceList-line`} key={index}>
                          <a onClick={(e) => {this.openLink(e,item.url)}}>{item.name}</a>
                          </div>
                        )
                      })
                    }
                  </Accordion.Panel>
                )
              })
            }
          </Accordion>
          } 
      </div>
    )
  }
}